<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('出差申请表单')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body>
<div class="main-content">
    <form id="form-user-add" class="form-horizontal">
        <input name="deptId" type="hidden" th:value="${user.deptId}" id="treeId"/>
        <input name="userId" type="hidden" th:value="${@permission.getPrincipalProperty('userId')}" id="userIdSelect"/>
        <h4 class="form-header h4">基本信息--单独出差表单</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>姓名：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <!--禁止编辑-->
                            <input type="text" class="form-control" placeholder="请输入用户名称" id="userSuggest"
                                   th:value="${@permission.getPrincipalProperty('userName')}" readonly="readonly"
                                   maxlength="20" required>
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>归属部门：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input name="dept" id="treeName" onclick="selectDeptTree()" type="text"
                                   th:value="${user.dept.deptName}" placeholder="请选择归属部门" class="form-control" required
                                   readonly>
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">性别：</label>
                    <div class="col-sm-8">
                        <select name="gender" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}"
                                disabled>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>岗位：</label>
                    <div class="col-sm-8">
                        <input name="post" placeholder="请输入岗位" th:value="${post.postName}" class="form-control"
                               type="text" maxlength="10" readonly required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>出差开始时间：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input name="startTime" type="text" class="form-control" id="startTime"
                                   placeholder="yyyy-MM-dd HH:mm:ss" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>出差结束时间：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input name="endTime" type="text" class="form-control" id="endTime"
                                   placeholder="yyyy-MM-dd HH:mm:ss" required>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--出差类型-->
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>出差类型：</label>
                    <div class="col-sm-8">
                        <select name="businessTripType" class="form-control m-b" th:with="type=${@dict.getType('businessTrip_type')}" required>
                            <option value="">--请选择出差类型--</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>选择管理领导审批：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input class="form-control" type="text" name="auditUserName" id="userNames"  onclick="selectUsersToParentCallBack2()" required>
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            <input class="form-control" type="hidden" name="auditUserId" id="chooseLeader">
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label"><span style="color: red; ">*</span>出差原因：</label>
                    <div class="col-xs-10">
                        <textarea name="content" maxlength="1000" class="form-control" rows="10"
                                  required="required"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">其它信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">备注：</label>
                    <div class="col-xs-10">
                        <textarea name="remarks" maxlength="500" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">表单提交</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <button class="btn btn-success" type="submit" id="submitApplay"><i class="fa fa-check"></i>提交请假申请
                        </button>
                            <button class="btn btn-primary" type="submit" id="cancle"><i class="fa fa-reply-all"></i>规划好了再来
                        </button>
                    </div>
                </div>
            </div>
        </div>


    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>
<script>
    var prefix = ctx + "oa/businessTrip";
    var prefix2=ctx + "activiti/process";
    // var deptId=1;
    function selectUsersToParentCallBack2(){
        var options = {
            title: '选择部审批人',
            url: prefix2 + "/chooseAuditUser/",
            width: 1360,

            callBack: doSubmit2
        };
        $.modal.openOptions(options);
    }

    function doSubmit2(index, layero){
        var rows = layero.find("iframe")[0].contentWindow.getSelections();
        var userNames = layero.find("iframe")[0].contentWindow.getSelections2();
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $('#chooseLeader').val( rows.join());
        $('#userNames').val(userNames.join());
        $.modal.close(index);
    }


    $(function () {
        $("#submitApplay").on("click", function () {

            if ($.validate.form()) {
                var data = $("#form-user-add").serializeArray();

                $.ajax({
                    url: prefix + "/save",
                    type: 'post',
                    cache: false,
                    async: false,
                    data: data,
                    dataType: "json",
                    success: function (result) {

                        // console.log("result:",result);
                        if (result.code == 0) {
                            // 添加交互界面，提升用户体验
                            // 弹框提示保存成功
                            // $.modal.alert(result.msg, modal_status.SUCCESS);
                            // 添加交互界面，提升用户体验，confirm会快手覆盖弹框提示
                            $.modal.confirm(result.msg + ",是否关闭请假页面？点击【取消】按钮可继续添加新的请假申请。", function () {
                                // 此系统封装的关闭窗口方法
                                closeItem();
                            });


                        }

                    }
                });
            }


        });

        $("#cancle").on("click", function () {
            // 此系统封装的关闭窗口方法
            closeItem();

        });
    });


    /*选择部门树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }


    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = $.modal.getChildFrame(index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            $.modal.close(index);
        }
    }

    $(function () {

        <!-- laydate时间选择器样式 -->
        layui.use('laydate', function () {
            var laydate = layui.laydate;


            laydate.render({
                elem: '#startTime',
                type: 'datetime',
                trigger: 'click'
            });

            laydate.render({
                elem: '#endTime',
                type: 'datetime',
                trigger: 'click'
            });
        });

    });

</script>
</body>
</html>
